<template>
    <div id="system-box">
        <el-header>阿里妈妈车位租赁管理系统</el-header>
        <div class="all">
            <div class="green-border">
                <h3>出租方登录</h3>
                <br>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="用户名:">
                        <el-input v-model.lazy="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="密 码:">
                        <el-input type="password" v-model.lazy="form.password"></el-input>
                    </el-form-item>
                    <el-form-item id="login-box">
                        <el-button type="success" @click="doLogin(form)"
                            >立即登录</el-button
                        >
                        <br />
                        <router-link to="/register">
                            没有账号，去注册
                        </router-link>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-footer></el-footer>
    </div>
</template>

<script>
import{ createNamespacedHelpers }from "vuex";
const { mapActions,mapState } = createNamespacedHelpers('lessors')
export default {
    data() {
        return {
           form:{
               username:"",
               possword:""
           }
        };
    },
    computed:{
        // ...mapState(["form",])
    },

    methods: {
        ...mapActions(['login']),
        async doLogin(form){
           
            const data = await this.login(form)

            
            if(data.status){
                alert("登录成功")
                localStorage.lessorId=data[0]._id
                localStorage.token=data.token;
                this.$router.push("/lessors")
            }else{
                alert(data.message)
            }
        }
    },
};
</script>

<style scoped  lang='scss'>
#system-box {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .el-header {
        height: 50px;
        background: lightgreen;
        line-height: 50px;
        font-size: 30px;
        font-weight: bolder;
    }
    .all {
        flex: 1;
        .green-border {
            border: rgb(20, 197, 20) 2px solid;
            height: 350px;
            width: 500px;
            padding: 60px 50px;
            margin: 70px auto;
            border-radius: 20px;
            #login-box{
                text-align: center;
                margin-left: -80px;
            }
        }
    }
    .el-footer {
        height: 50px;
        background: lightgreen;
    }
}
</style>